<template>
  <div class="main">
    <!-- Tools -->
    <div class="tools-bar clearfix">
      <div class="item" style="width: 418px">商品</div>
      <div class="item" style="width: 100px">单价（元）</div>
      <div class="item" style="width: 70px">数量</div>
      <div class="item" style="width: 80px">商品操作</div>
      <div class="item" style="width: 145px">总金额（元）</div>
      <div class="item" style="width: 100px">
        <el-select size="mini" v-model="orderStatus" @change="getOrderList">
          <el-option v-for="(status, index) in orderStatusTypes.TypeArray" :key="index" v-if="index < 5" :value="status.KeyId" :label="status.Value"></el-option>
        </el-select>
      </div>
      <div class="item" style="width: 135px">操作</div>
    </div>
    <!-- Tab -->
    <el-tabs v-model="orderStatus" @tab-click="tabChange" class="v-tabs">
      <el-tab-pane
        v-for="(status, i) in orderStatusTypes.TypeArray" :key="i" v-if="i < 5" :name="status.KeyId">
        <span slot="label">
          {{status.Value}}
          <el-badge v-if="status.KeyId == 1 && state1Num" :value="state1Num"/>
          <el-badge v-if="status.KeyId == 2 && state2Num" :value="state2Num"/>
          <el-badge v-if="status.KeyId == 3 && state3Num" :value="state3Num"/>
          <el-badge v-if="status.KeyId == 4 && state4Num" :value="state4Num"/>
        </span>
        <div class="order-list" v-for="(order, index) in orderList" :key="index">
          <div class="order-item">
            <div class="order-hd">
              <span>订单编号：{{order.orderId}}</span>
              <span>下单时间：{{order.create_time}}</span>
              <div class="btn-delete" @click="delOrder(order.orderId)">
                <i class="el-icon-delete"></i>删除
              </div>
            </div>
            <div class="order-bd clearfix">
              <div class="goods-list">
                <div class="goods-item clearfix" v-for="(good, j) in order.products" :key="j">
                  <div class="goods-img">
                    <img :src="good.productCover" width="100%" height="100%">
                  </div>
                  <div class="goods-info">
                    <router-link :to="'/goods/goodsDetail?productId=' + good.productId" class="goods-name">{{good.name}}</router-link>
                    <div class="goods-specification">
                      <div class="spec-name">规格：{{good.attributeName}}</div>
                      <div class="spec-price">
                        <p class="sell-price">¥{{good.sellPrice}}</p>
                        <p class="original-price">¥{{good.originalPrice}}</p>
                      </div>
                      <div class="goods-amount">x {{good.amount}}</div>
                      <div class="goods-operation">
                        <!-- 代付款和失效订单不可售后 -->
                        <el-button v-if="good.saleafterStatus === 0 && !(order.orderStatus == 1 || order.orderStatus == 6 || order.orderStatus == 7)" type="success" size="mini" @click="apply(good,order)">申请售后</el-button>
                        <el-button v-if="good.saleafterStatus === 1"  type="success" size="mini" disabled>售后中</el-button>
                        <el-button v-if="good.saleafterStatus === 2"  type="success" size="mini" disabled>已售后</el-button>
                        <!-- <el-button v-if="good.saleafterStatus === 3"  type="success" size="mini" disabled></el-button> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="sum">
                <div>
                  <p class="sum-price">¥{{order.totalPrice}}</p>
                  <p class="desc">(不含运费)</p>
                </div>
              </div>
              <div class="status">
                <div>
                  <p>{{orderStatusTypes.Types[order.orderStatus]}}</p>
                  <router-link :to="'/order/orderInfo?orderId=' + order.orderId + '&status=' + orderStatus" class="link">订单详情</router-link>
                  <!-- 查看物流 -->
                  <el-popover v-if="order.orderStatus == 3 || order.orderStatus == 4" placement="bottom" width="280" trigger="hover" @show="getLogisticsData(order.orderId)">
                    <div class="logi-box">
                      <div class="hd">{{shippingName}}: {{shippingNum}}</div>
                      <div class="bd">
                        <ul class="list">
                          <li class="item" v-for="(item, index) in trackRate" :key="index" v-if="index < 2">
                            <p>{{item.AcceptStation}}</p>
                          </li>
                          <li class="item">以上为最新跟踪信息 <router-link class="link" :to="'/order/logistics?orderId=' + order.orderId">查看全部</router-link></li>
                        </ul>
                      </div>
                    </div>
                    <router-link slot="reference" class="link" :to="'/order/logistics?orderId=' + order.orderId + '&status=' + orderStatus">查看物流</router-link>
                  </el-popover>
                </div>
              </div>
              <div class="operation">
                <div v-if="order.orderStatus == 1">
                  <p v-if="order.RemainingTime" style="font-size: 12px;">剩余:{{order.RemainingTime}}</p>
                  <p><el-button class="btn-pay" type="danger" size="mini" @click="payNow(order.orderId)">立即支付</el-button></p>
                  <p><el-button class="btn-cancel" type="text" size="mini" @click="cancelOrder(order.orderId)">取消订单</el-button></p>
                </div>
                <div v-if="order.orderStatus == 2">
                  <p><el-button class="btn-pay" type="danger" size="mini" @click="hastenGood">催促发货</el-button></p>
                </div>
                <div v-if="order.orderStatus == 3">
                  <p><el-button class="btn-pay" type="danger" size="mini" @click="confirmReceipt(order.orderId)">确认收货</el-button></p>
                </div>
                <div v-if="order.orderStatus == 7">
                  <p><el-button class="btn-cancel" type="text" size="mini" @click="cancelOrder(order.orderId)">取消订单</el-button></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 分页 -->
    <v-pagination v-if="total" :pg="page" :size="pageSize" :total="total" @page-change="pageChange"></v-pagination>
  </div>
</template>

<script>
import { orderStatusTypes } from '@/util/enums'
import vPagination from '@/components/public/pagination'
export default {
  data () {
    return {
      orderStatusTypes: orderStatusTypes, // 订单状态
      orderStatus: this.$route.query.status || '-1', // 订单状态  全部：-1；待付款：1；待发货：2；待收货：3；已完成：4； 待确认：7；
      state1Num: '',
      state2Num: '',
      state3Num: '',
      state4Num: '',
      orderList: [], // 订单列表
      total: 0,
      page: 1,
      pageSize: 10,
      shippingName: '',
      shippingNum: '',
      trackRate: []
    }
  },
  components: {
    vPagination
  },
  mounted () {
    if (this.$route.query.status === 'undefined') {
      this.orderStatus = '-1'
    }
    this.getOrderList()
    this.getOrderNum()
  },
  methods: {
    // 订单状态筛选
    tabChange () {
      this.getOrderList()
    },
    // 获取订单列表
    getOrderList () {
      this.$http.post(this.$api + '/pc/order/myOrders', {
        orderStatus: this.orderStatus,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        if (res.responseCode === '0000') {
          this.orderList = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 获取订单数量
    getOrderNum () {
      this.$http.post(this.$api + '/pc/order/getOrderNum', {}).then(res => {
        if (res.responseCode === '0000') {
          this.state1Num = res.data.dfk
          this.state2Num = res.data.dfh
          this.state3Num = res.data.dsh
          this.state4Num = res.data.ywc
        }
      })
    },
    // 获取物流信息
    getLogisticsData (id) {
      this.$http.post(this.$api + '/pc/order/getOrderTraces', {
        orderId: id
      }).then(res => {
        if (res.responseCode === '0000') {
          this.shippingName = res.data.shippingName
          this.shippingNum = res.data.shippingNum
          this.trackRate = res.data.Traces
        }
      })
    },
    // 取消订单
    cancelOrder (id) {
      this.$confirm('是否确认取消该订单？', '提示', {
        confirmButtonText: '',
        cancelButtonText: '',
        type: 'warning'
      }).then(() => {
        this.$http.post(this.$api + '/pc/order/closeOrder', {
          porderId: id
        }).then(res => {
          if (res.responseCode === '0000') {
            this.$message({
              type: 'success',
              duration: this.$store.state.duration,
              message: res.responseMsg,
              onClose: () => {
                this.getOrderList()
                this.getOrderNum()
              }
            })
          } else {
            this.$message.error({
              duration: this.$store.state.duration,
              message: res.responseMsg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          duration: this.$store.state.duration,
          message: '已取消该操作'
        })
      })
    },
    // 催发货
    hastenGood () {
      this.$message.info({
        duration: this.$store.state.duration,
        message: '您的催货请求已发送！'
      })
    },
    // 确认收货
    confirmReceipt (id) {
      this.$confirm('是否确认收货？', '提示', {
        confirmButtonText: '',
        cancelButtonText: '',
        type: 'warning'
      }).then(() => {
        this.$http.post(this.$api + '/pc/order/confirmReceive', {
          orderId: id
        }).then(res => {
          if (res.responseCode === '0000') {
            this.$message({
              type: 'success',
              duration: this.$store.state.duration,
              message: res.responseMsg,
              onClose: () => {
                this.getOrderList()
                this.getOrderNum()
              }
            })
          } else {
            this.$message.error({
              duration: this.$store.state.duration,
              message: res.responseMsg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          duration: this.$store.state.duration,
          message: '已取消该操作'
        })
      })
    },
    // 删除订单
    delOrder (id) {
      this.$confirm('是否确认删除该订单？', '提示', {
        confirmButtonText: '',
        cancelButtonText: '',
        type: 'warning'
      }).then(() => {
        this.$http.post(this.$api + '/pc/order/deleteOrder', {
          orderId: id
        }).then(res => {
          if (res.responseCode === '0000') {
            this.$message({
              type: 'success',
              duration: this.$store.state.duration,
              message: res.responseMsg,
              onClose: () => {
                this.getOrderList()
                this.getOrderNum()
              }
            })
          } else {
            this.$message.error({
              duration: this.$store.state.duration,
              message: res.responseMsg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          duration: this.$store.state.duration,
          message: '已取消该操作'
        })
      })
    },
    // 申请售后
    apply (good, order) {
      let applyGood = {
        name: good.name,
        attributeName: good.attributeName,
        productCover: good.productCover,
        orderId: order.orderId,
        orderStatus: order.orderStatus,
        orderProductId: good.orderProductId
      }
      window.localStorage.setItem('applyParams', JSON.stringify(applyGood))
      this.$router.push({path: '/user/orderSaleAfter'})
    },
    // 立即支付
    payNow (id) {
      this.$router.push({
        path: '/order/payment',
        query: {
          orderId: id
        }
      })
    },
    pageChange (pg) {
      this.page = pg
      this.getOrderList()
      this.getOrderNum()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.main {
  position: relative;
}
.tools-bar {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: 40px;
  background: #eeeeee;
  .item {
    float: left;
    height: 40px;
    line-height: 40px;
    font-size: $fz_14;
    color: #333333;
    text-align: center;
  }
}
.order-list {
  width: 100%;
  .order-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: solid 1px $border_color;
    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: 0;
    }
    .order-hd {
      position: relative;
      padding: 0 15px;
      height: 40px;
      line-height: 40px;
      font-size: $fz_14;
      color: $f_main;
      border: solid 1px $border_color;
      background: #ffffff;
      span {
        padding-right: 25px;
      }
      .btn-delete {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        cursor: pointer;
        i {
          margin-right: 2px;
          font-size: 16px;
        }
        &:hover {
          color: $font-blue;
        }
      }
    }
    .order-bd {
      display: flex;
      background: #ffffff;
      border: solid 1px $border_color;
      border-top: 0;
      .goods-list{
        flex: 1;
        .goods-item {
          padding: 20px 0 20px 18px;
          border-bottom: solid 1px $border_color;
          &:last-child {
            border-bottom: 0;
          }
          .goods-img {
            float: left;
            margin-right: 20px;
            width: 134px;
            height: 134px;
            border: solid 1px $border_color;
          }
          .goods-info {
            float: left;
            width: 494px;
            .goods-name {
              width: 245px;
              height: 40px;
              font-size: $fz_14;
              line-height: 20px;
              overflow:hidden;
              text-overflow:ellipsis;
              display:-webkit-box;
              -webkit-box-orient:vertical;
              -webkit-line-clamp:2;
            }
            .goods-specification {
              display: flex;
              align-items: center;
              font-size: $fz_14;
              color: $f_main;
              height: 94px;
              .spec-name {
                flex: 1;
              }
              .spec-price {
                width: 100px;
                text-align: center;
                .original-price {
                  margin-top: 4px;
                  font-size: $fz_12;
                  color: $f_sub;
                }
              }
              .goods-amount {
                width: 70px;
                text-align: center;
              }
              .goods-operation {
                width: 80px;
                text-align: center;
              }
            }
          }
        }
      }
      .sum,
      .status,
      .operation {
        display: flex;
        align-items: center;
        font-size: $fz_14;
        border-left: solid 1px $border_color;
        & > div {
          flex: 1;
          text-align: center;
        }
      }
      .sum {
        width: 145px;
        .sum-price {
          margin-bottom: 4px;
          color: $red;
        }
      }
      .status {
        width: 100px;
        .link {
          display: inline-block;
          margin-top: 4px;
          font-size: $fz_14;
          color: $font-blue;
        }
      }
      .operation {
        width: 135px;
        .btn-pay {
          margin: 4px 0 2px;
          background: $red;
          &:hover {
            background: $red_l;
          }
          &:active {
            background: $red_d;
          }
        }
        .btn-cancel {
          color: $f_sub;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
.logi-box {
  padding: 0 10px;
  .hd {
    padding-bottom: 10px;
    border-bottom: solid 1px $border_color;
    font-size: 14px;
    color: $f_main;
  }
  .bd {
    margin-top: 8px;
    .list {
      padding-left: 12px;
      .item {
        position: relative;
        margin-bottom: 10px;
        font-size: 12px;
        line-height: 16px;
        color: $f_normal;
        &:first-child {
          color: $red;
          &::before {
            background: $red;
          }
        }
        &::before {
          content: '';
          position: absolute;
          top: 6px;
          left: -10px;
          width: 4px;
          height: 4px;
          background: $f_normal;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
